iT邦幫忙

2023 iThome 鐵人賽
DAY 22
0
AI & Data

我要成為AI溝通師!30天快速理解Prompt Engineering系列 第 22 篇

DAY22-創建我的網頁

15th鐵人賽
243 瀏覽

  • 分享至 

  • xImage
    •  

今天我們要來創建我的理想網頁啦~
因為我實作的重點不在如何建立HTML
所以對於這個部份我就不多做說明了~
那麼就來看看我是怎麼建立網頁的吧/images/emoticon/emoticon76.gif

再跟大家回顧一下我的實作目標
https://ithelp.ithome.com.tw/upload/images/20231006/20162525Tz2bug5Wma.jpg

首先，我要先做最重要的地方，輸入餐廳類型的欄位。

https://ithelp.ithome.com.tw/upload/images/20231006/20162525eiG1ZoF9B8.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525cYxugemvz8.png

接著，是一樣重要的提交按鈕

https://ithelp.ithome.com.tw/upload/images/20231006/20162525Z0JQssvXtx.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525SESZzvpO0I.png

接下來，放上我手繪的圖標

https://ithelp.ithome.com.tw/upload/images/20231006/201625252mmYyady6q.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525aRhomIDFSA.png

!小提示!

要放的圖示需要跟HTML放在同一個資料夾中
網頁才能讀到圖片喔~
在這裡我們直接丟到昨天創的新實作資料夾就好啦~
https://ithelp.ithome.com.tw/upload/images/20231006/20162525tLHefEIfDM.png

另外alt中的文字，平常並不會顯示
但是如我我們圖片跑不出來
他就會代替圖片出來跟大家見面啦~
如果圖片中有甚麼重要內容
可以將其存在alt
以備不時之需喔~

最後呢，我想要將這些東東都移到畫面中間

對，沒錯。就是置中/images/emoticon/emoticon37.gif
https://ithelp.ithome.com.tw/upload/images/20231006/20162525UNdeS9048j.png
實際畫面
https://ithelp.ithome.com.tw/upload/images/20231006/20162525AZQCfrEctN.png

哼哼!越來越像我預想中的畫面了!
本宮非常滿意/images/emoticon/emoticon35.gif
明天我們要加上CSS渲染我們的網頁
讓網頁變得更~漂亮
有興趣的人要記得來看看喔!


上一篇
DAY21-專案環境架設
下一篇
DAY23-網頁畫面優化
系列文
我要成為AI溝通師!30天快速理解Prompt Engineering 共 30 篇
  1. 26
    DAY26-網頁與OpenAI API的連結問題處理-1
  2. 27
    DAY27-網頁與OpenAI API的連結問題處理-2
  3. 28
    DAY28-實作改進與心得
  4. 29
    DAY29-提示工程的未來展望與潛在威脅
  5. 30
    DAY30-參賽總結
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙